<template>
  <el-dialog
    title="上传图片"
    :visible="isshow"
    width="640px"
    append-to-body
    @close="close"
  >
    <div class="croperimg">
      <div class="cropper-content">
        <div class="cropper">
          <vueCropper
            ref="cropper"
            :img="option.img"
            :output-size="option.size"
            :output-type="option.outputType"
            :info="true"
            :full="option.full"
            :can-move="option.canMove"
            :can-move-box="option.canMoveBox"
            :original="option.original"
            :auto-crop="option.autoCrop"
            :auto-crop-width="option.autoCropWidth"
            :auto-crop-height="option.autoCropHeight"
            :fixed-box="option.fixedBox"
            @realTime="realTime"
            @imgLoad="imgLoad"
          />
        </div>
        <!-- 预览 -->
        <div class="show-preview-box">
          <div
            class="show-preview"
            :style="{
              width: previews.w + 'px',
              height: previews.h + 'px',
              overflow: 'hidden',
              marginBottom: '10px',
            }"
          >
            <div
              :style="{ width: previews.w + 'px', height: previews.h + 'px' }"
              class="preview"
            >
              <img :src="previews.url" :style="previews.img">
            </div>
          </div>
          <div
            class="show-preview"
            :style="{
              width: previews.w + 'px',
              height: previews.h + 'px',
              overflow: 'hidden',
              marginBottom: '5px',
            }"
          >
            <div
              :style="{ width: previews.w + 'px', height: previews.h + 'px' }"
              class="preview circle"
            >
              <img :src="previews.url" :style="previews.img">
            </div>
          </div>
        </div>
      </div>
      <div class="footer-btn">
        <div class="scope-btn">
          <div class="change-img">
            <el-button size="small">更换图片</el-button>
            <input
              id="uploads"
              type="file"
              accept="image/png, image/jpeg, image/gif, image/jpg"
              @change="choseImg($event, 1)"
            >
          </div>
          <el-button
            type="primary"
            size="small"
            plain
            circle
            icon="el-icon-zoom-in"
            @click="changeScale(1)"
          />
          <el-button
            type="primary"
            size="small"
            plain
            circle
            icon="el-icon-zoom-out"
            @click="changeScale(-1)"
          />
          <el-button
            type="primary"
            size="small"
            plain
            circle
            icon="el-icon-refresh-left"
            @click="rotateLeft"
          />
          <el-button
            type="primary"
            size="small"
            plain
            circle
            icon="el-icon-refresh-right"
            @click="rotateRight"
          />
        </div>
        <div class="upload-btn">
          <el-button
            type="warning"
            size="small"
            icon="el-icon-download"
            @click="down('blob')"
          >下载</el-button>
          <el-button
            type="success"
            size="small"
            icon="el-icon-upload"
            @click="uploadImg()"
          >上传</el-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import { VueCropper } from 'vue-cropper'
import { imageUpload } from '@/api/subject_c'
export default {
  name: 'Cropperimg',
  components: { VueCropper },
  props: {
    // imgbox: {
    //   type: Object,
    //   default() {
    //     return {
    //       isshow: false,
    //     };
    //   },
    // },
    isshow: {
      type: Boolean,
      default: false
    },
    mark: {
      // 提交给服务器端的字段
      type: String,
      default: 'avatar'
    }
  },
  data() {
    return {
      // isshow: false,
      crap: false,
      previews: {},
      option: {
        img: '',
        size: 1,
        full: false, // 输出原图比例截图 props名full
        canMove: true,
        original: false,
        canMoveBox: true,
        autoCrop: true,
        autoCropWidth: 150,
        autoCropHeight: 150,
        fixedBox: true
      },
      downImg: '#'
    }
  },
  methods: {
    changeScale(num) {
      num = num || 1
      this.$refs.cropper.changeScale(num)
    },
    rotateLeft() {
      this.$refs.cropper.rotateLeft()
    },
    rotateRight() {
      this.$refs.cropper.rotateRight()
    },
    finish(type) {
      // 输出
      // var test = window.open('about:blank')
      // test.document.body.innerHTML = '图片生成中..'
      if (type === 'blob') {
        this.$refs.cropper.getCropBlob((data) => {
          var img = window.URL.createObjectURL(data)
          this.model = true
          this.modelSrc = img
        })
      } else {
        this.$refs.cropper.getCropData((data) => {
          this.model = true
          this.modelSrc = data
        })
      }
    },
    // 实时预览函数
    realTime(data) {
      this.previews = data
    },
    down(type) {
      // event.preventDefault()
      var aLink = document.createElement('a')
      aLink.download = 'author-img'
      // 输出
      if (type === 'blob') {
        this.$refs.cropper.getCropBlob((data) => {
          this.downImg = window.URL.createObjectURL(data)
          aLink.href = window.URL.createObjectURL(data)
          aLink.click()
        })
      } else {
        this.$refs.cropper.getCropData((data) => {
          this.downImg = data
          aLink.href = data
          aLink.click()
        })
      }
    },
    choseImg(e, num) {
      // 选择图片
      var file = e.target.files[0]
      if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
        alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
        return false
      }
      if (file.size > 1024 * 1024 * 2) {
        alert('图片不能超过2M')
        return false
      }
      var reader = new FileReader()
      reader.onload = (e) => {
        let data
        if (typeof e.target.result === 'object') {
          // 把Array Buffer转化为blob 如果是base64不需要
          data = window.URL.createObjectURL(new Blob([e.target.result]))
        } else {
          data = e.target.result
        }
        if (num === 1) {
          this.option.img = data
        } else if (num === 2) {
          this.example2.img = data
        }
      }
      // 转化为base64
      // reader.readAsDataURL(file)
      // 转化为blob
      reader.readAsArrayBuffer(file)
    },
    imgLoad(msg) {
      console.log(msg)
    },
    uploadImg() {
      this.$refs.cropper.getCropData(async(data) => {
        const res = await imageUpload(
          {
            file: data,
            filename: 'avatar.jpg'
          },
          {
            mode: 'base64',
            type: 'image'
          }
        )
        this.$emit('upload', res)
        this.close()
      })
    },
    close() {
      this.option.img = ''
      this.$emit('update:isshow', false)
    }
  }
}
</script>
<style scoped lang="scss">
.croperimg {
  width: 600px;
  background-color: #fff;
}
.cropper-content {
  display: flex;
  .cropper {
    width: 400px;
    height: 300px;
  }
  .show-preview-box {
    flex: 1;
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin-left: 30px;
    .preview {
      overflow: hidden;
      border: 1px solid #cccccc;
      padding: 4px;
      box-sizing: border-box;
      background: #cccccc;
    }
    .preview.circle {
      border-radius: 50%;
    }
  }
}
.footer-btn {
  margin-top: 30px;
  display: flex;
  display: -webkit-flex;
  justify-content: flex-end;
  -webkit-justify-content: flex-end;
  .scope-btn {
    width: 350px;
    display: flex;
    justify-content: space-between;
    position: relative;
    #uploads {
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
      width: 80px;
      height: 32px;
      z-index: 100;
    }
  }
  .upload-btn {
    flex: 1;
    -webkit-flex: 1;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
  }
}
</style>
